<template>
  <div>
    <button @click="hAddRoute">addRoute</button>
    <hr>
    御剑乘风来,除魔天地间!===首页
    <el-button type="primary" @click="btn">使用sync修饰符</el-button>
    <hr>
    <dia :visible.sync="dialogVisible" />
  </div>
</template>
<script>
/*
目的：点击 使用sync修饰符 按钮  实现一个对话框的显示，需要使用sync来实现
封装一个对话框的组件

总体步骤：
1-定义一个子组件dia.vue 显示在父组件中
2-父组件向子组件传递一个值  bool值
3-子组件接受这个bool值
4-子组件更改这个bool值，需要父组件传值的时候添加修饰符.sync
5-子组件需要使用   this.$emit('update:visible', false)来更改传过来的数据

如何实现组件之间双向数据绑定
 */
import dia from './dia.vue'
export default {
  name: '',
  components: {
    dia
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  computed: {},
  created() {},
  methods: {
    btn() {
      // 显示对话框
      this.dialogVisible = !this.dialogVisible
    },
    hAddRoute() {
      console.log(`this===11111`, this)
      this.$router.addRoutes([
        {
          path: '/abc',
          component: () => import('@/views/abc')
        }
      ])
      console.log(`this====22222`, this)
    }
  }
}
</script>
<style lang="less" scoped></style>
